<template>
  <div class="">
    <div
      id="dwArea"
      class="dwArea"
      element-loading-text="数据加载中..."
    >
        <div
        id="dwaContent"
        uWidth="100"
        uHeight="100"
        :style="{
          width:  '50%',
          height: '50%',
        }"
      >
        <DragComponent
          v-for="(item, index) in flowDataNodes"
          :item="item"
          :index="index"
          :key="item.id"
        ></DragComponent>
        <svg class="svgClass" style="width: 100%; height: 100%">
          <PathLine
            v-for="(item, index) in flowDataLinks"
            v-bind:item="item"
            v-bind:index="index"
            :key="item.id"
          ></PathLine>
        </svg>
      </div>
      </div>
  </div>
</template>

<script>
import DragComponent from "./project/view_edit_area/DragComponent.vue";
import PathLine from "./project/view_edit_area/PathLine.vue";
export default {
  props: ["dataList"],
  data() {
    return {
      flowDataNodes: [],
      flowDataLinks: []
    };
  },
  computed: {
    flowData: function() {
      return this.$store.state.project.flowData;
    },
    flowNodes: function() {
      this.flowData.nodes.forEach(item => {
        if (item.name == "新文件解析") {
          if (item.outputs.length == 1) {
            item.outputs[0].left = 50;
          } else if (item.outputs.length == 2) {
            item.outputs[0].left = 25;
            item.outputs[1].left = 75;
          }
          if (item.inputs.length == 1) {
            item.inputs[0].left = 50;
          } else if (item.inputs.length == 2) {
            item.inputs[0].left = 25;
            item.inputs[1].left = 75;
          }
        }
        if (item.name == "启动") {
          item.outputs[0].left = 50;
        } else if (item.name == "结束") {
          if (item.inputs.length == 1) {
            item.inputs[0].left = 50;
          } else if (item.inputs.length == 2) {
            item.inputs[0].left = 25;
            item.inputs[1].left = 75;
          }
        }
      });
      return this.flowData.nodes;
    },
    flowLines: function() {
      return this.flowData.links;
    }
  },
  mounted() {
    if (this.dataList.json) {
      var json = JSON.parse(this.dataList.json);
      this.flowDataNodes = json.nodes;
      this.flowDataLinks = json.links;
      //   if (json.style) {
      //     state.flowData.contentStyle.height = json.style.height;
      //   } else {
      //     state.flowData.contentStyle.height = 120;
      //   }
      //   //如果是查看流程则不对流程组件进行更新校验
      //   if (rootState.global.otherState.previewProjectFlow == false) {
      //     setTimeout(function() {
      //       dispatch("checkNodeUpdate", {
      //         summary: json.summary
      //       });
      //     }, 500);
      //   }
      //   this.$store.dispatch("fillCurrentJson", {
      //     json: this.dataList.json
      //   });
    } else {
      // this.$store.state.project.flowData.contentStyle.height = 120;
      this.$store.state.project.flowData.contentStyle.height = 100;
      this.$store.state.project.flowData.nodes = [];
      this.$store.state.project.flowData.links = [];
    }
    //切换完成
    this.$store.state.project.flowData.projectChange = false;
  },
  components: {
    DragComponent,
    PathLine
  }
};
</script>

<style  scoped>
</style>
